<template>
  <div class="my-goods-list">
    <MyHeader></MyHeader>
    <MyTable :list="list" >
      <template #header>
        
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      
      </template>
      <template #body="scope">
        
        <td>{{scope.row.id}}</td>
        <td>{{scope.row.goods_name}}</td>
        <td>{{scope.row.goods_price}}</td>
        <td>
          <input v-if="scope.row.inputVisible" type="text"
          v-focus
          @blur="scope.row.inputVisible=false"
          v-model="scope.row.inputValue"
          @keydown.enter="enter(scope.row)"
          >
          <button v-else @click="scope.row.inputVisible=true" class="badge bg-warning text-dark">
            +tage
          </button>
          <span v-for="(item,index) in scope.row.tags" :key="index" 
        class="badge bg-warning text-dark">
          {{item}}
          </span></td>
        <td><button class="btn btn-sm btn-danger" @click="del(scope.row.id)">删除</button></td>
      
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyHeader from '../components/MyHeader.vue'
import MyTable from "../components/MyTable";
import axios from "axios";
axios.defaults.baseURL = "https://www.escook.cn";
// 目标: 循环商品列表表格
// 1. 封装MyTable.vue 整体表格组件-一套标签和样式
// 2. axios请求数据
// 3. 传入MyTable组件里循环tr显示数据

// 目标: 展示tags标签
// 1. tags数组 - 某个td循环span使用文字
// 2. span设置bs的样式

// 目标: 删除数据
// 1. 删除按钮 - 点击事件
// 2. 作用域插槽把索引值关联出来了
// scope身上就有row和index
// 3. 删除中使用scope.index的索引值
// 4. 删除事件里删除数组里对应索引值的数据
export default {
  components: {
    MyTable,
    MyHeader
  },
  data() {
    return {
      list: [] // 所有数据
    };
  },
  created() {
    axios({
      url: "/api/goods",
    }).then((res) => {
      console.log(res);
      this.list = res.data.data;
    });
  },
  methods:{
    del(id){
    let index=  this.list.findIndex(item=>item.id=id)
    this.list.splice(index,1)
    },
    enter(obj){
      if(obj.inputValue===''){
        return alert('不能为空')
      }
      obj.tags.push(obj.inputValue)
      obj.inputValue=''
    }
  }
};
</script>
<style lang="less" scoped>
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
</style>